<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-button" @click="goBack">
        <text class="back-icon">←</text>
        <text class="title">{{ drawbookName }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 顶部图片 -->
      <view class="header-image">
        <image src="@/static/img/yes.png" class="header-image"></image>
      </view>

      <!-- 内容列表 -->
      <view class="content-list">
        <view
          class="content-item"
          v-for="(item, index) in contents"
          :key="index"
        >
          <text class="content-title">{{ item.title }}</text>
          <text class="content-info" style="color: #ff9900;">单词量: {{ item.wordCount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      drawbookName: '', // 从上一页传递过来的drawbook名称
      contents: [], // 存储获取到的内容数据
    };
  },
  onLoad(options) {
    // 接收上一页传递的drawbook参数
    if (options.drawbook) {
      this.drawbookName = options.drawbook;
      this.loadContentData(this.drawbookName);
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 获取内容数据
    loadContentData(name) {
      uni.request({
        header: {
          'Content-Type': 'application/json; charset=utf-8'  // 设置请求头，指定请求体的格式
        },
        url: getApp().globalData.baseUrl + "getDrawContentByName", // 拼接完整的接口地址
        method: 'POST', // 请求方法
        data: {
          name: name // 传递name参数
        },
        dataType: 'json', // 指定返回的数据类型
        success: (res) => {
          // 直接使用 res.data，不要再次解析
          if (res.data.code === 0) {
            this.contents = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 1000
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none',
            duration: 1000
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #fff;
  min-height: 100vh;
  padding: 0;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #f9f9f9;
  border-bottom: 1rpx solid #f5f5f5;
}

.back-button {
  display: flex;
  align-items: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}

.content {
  padding: 20rpx;
}

.header-image {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.header-image image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-list {
  display: flex;
  flex-direction: column;
}

.content-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.content-title {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.content-info {
  font-size: 28rpx;
}
</style>